<!DOCTYPE html>
<html>
    <head>
        <title><!-- 分享报告的标题 --></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
                font-size: 14px;
                font-weight: normal
            }
            body {
                background-color: #f5f5f5;
            }
            #info-list {
                padding: 44px 0 64px;
                overflow: hidden;
            }
            .md #info-list,
            .lg #info-list {
                padding: 64px 0 0;
            }
            .lg #header span,
            .lg #info-list {
                width: 800px;
                margin: 0 auto;
            }
            #info-list>li {
                margin: 0 0 8px
            }
            .md #info-list>li,
            .lg #info-list>li {
                width: 50%;
            }
            .md #info-list>li div,
            .lg #info-list>li div {
                padding: 10px
            }
            .md #info-list .left,
            .lg #info-list .left{
                float: left
            }
            .md #info-list .right,
            .lg #info-list .right{
                float: right
            }
            #info-list h2 {
                position: relative;
                padding: 8px 44px 8px 8px;
                font-size: 14px;
                font-weight: bold;
                background-color: #eee;
                cursor: pointer;
            }
            #info-list h2 i{
                position: absolute;
                right: 0;
                top: 0;
                display: block;
                width: 32px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                text-decoration: none;
                font-style: normal;
            }
            .md #info-list h2 i,
            .lg #info-list h2 i {
                display: none
            }
            .label-list {
                margin: 0 auto 8px;
                padding: 0 8px 8px 8px;
                overflow: hidden;
                background-color: #fff;
            }
            .label-list li {
                position: relative;
                top: -1px;
                padding: 4px 4px 4px 88px;
                min-height: 24px;
                border-top: 1px dotted #eee;
                text-align: right;
                line-height: 24px;
            }
            .label-list .multi-line {
                text-align: left;
            }
            .label-list li label {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 9;
                display: block;
                line-height: 32px;
                height: 32px;
                width: 88px;
                font-size: 12px;
                color: #777;
                text-align: left;
            }
            #header,
            #bottom-bar {
                position: fixed;
                z-index: 10;
                -webkit-box-shadow: 0 0 10px #999;
                -moz-box-shadow: 0 0 10px #999;
                box-shadow: 0 0 10px #999;
                width: 100%;
                line-height: 56px;
                height: 56px;
                background: #fff
            }
            #header span {
                position: relative;
                display: block;
                padding: 0 8px
            }
            #header span a {
                display: none;
            }
            .md #header span a,
            .lg #header span a {
                position: absolute;
                right: 8px;
                top: 12px;
                display: block;
                padding: 0 8px;
                text-align: center;
                color: #fff;
                font-size: 12px;
                text-decoration: none;
                background-color: #0b97c4;
                line-height: 32px;
                height: 32px;
                border-radius: 8px;
            }
            #header {
                top: 0;
                left: 0;
            }
            .sm #header,
            .xs #header {
                height: 32px;
                line-height: 32px;
                -webkit-box-shadow: 0 0 10px #999;
                -moz-box-shadow: 0 0 10px #999;
                box-shadow: 0 0 10px #999;
            }
            .md #header span,
            .lg #header span{
            }
            .sm #bottom-bar,
            .xs #bottom-bar {
                bottom: 0;
                left: 0;
            }
            .md #bottom-bar,
            .lg #bottom-bar {
                display: none
            }
            #bottom-bar a {
                display: block;
                margin: 8px;
                background-color: #0b97c4;
                color: #fff;
                border-radius: 8px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                text-decoration: none;
                font-size: 16px;
            }
            #info-list #footer {
                clear: both;
                text-align: center;
                padding: 8px 0;
                width: 100%;
                color: #999999;
                font-size: 12px;
            }
            #invalid {
                margin: 30px 10px;
                padding: 20px;
                border-radius: 8px;
                border: 1px solid #ddd;
                background-color: #fff;
                text-align: center;
                color: #999;
                font-size: 16px;
            }
            #invalid h2 {
                font-size: 48px;
                margin-bottom: 10px;
                color: #ccc
            }
            .md #invalid,
            .lg #invalid {
                margin: 30px auto;
                width: 480px;
            }
        </style>
    </head>
    <body>
        <div id="invalid">
            <h2>404</h2>
            分享链接已失效
        </div>
        <!-- 如果链接失效就显示上面的内容，否则显示下面的内容 -->
        <h2 id="header">
            <span>
                <!-- 是否需要标题，需要产品决定 -->
                来自136****2166的分享
                <!-- 这里‘###’要拼移动PACS的链接 -->
                <a href="###">查看影像</a>
            </span>
        </h2>
        <ul id="info-list">
            <li class="left">
                <div>
                    <h2 class="toggle-btn" data-for="base-info">基本信息<i>-</i></h2>
                    <ul class="label-list" id="base-info">
                        <li><label>姓名：</label><!-- 姓名 -->张三</li>
                        <li><label>性别：</label><!-- 性别 -->男</li>
                        <li><label>检查时年龄：</label><!-- 检查时年龄 -->075Y</li>
                    </ul>
                </div>
            </li>
            <li class="right">
                <div>
                <h2 class="toggle-btn" data-for="check-info">检查信息<i>-</i></h2>
                <ul class="label-list" id="check-info">
                    <li><label>设备类型：</label><!-- 设备类型 -->CT</li>
                    <li><label>检查日期：</label><!-- 检查日期 -->2015-12-12</li>
                    <li><label>检查机构：</label><!-- 检查机构 -->xxx医院</li>
                    <li><label>检查部位：</label><!-- 检查部位 -->胸部</li>
                    <li><label>检查名称：</label><!-- 检查名称 -->胸部CT</li>
                    <li><label>设备品牌：</label><!-- 设备品牌 -->--</li>
                    <li><label>设备型号：</label><!-- 设备型号 -->--</li>
                </ul>
                </div>
            </li>
            <li class="left">
                <div>
                <h2 class="toggle-btn" data-for="lc-info">临床信息<i>-</i></h2>
                <ul class="label-list" id="lc-info">
                    <li class="multi-line"><label>症状描述：</label><!-- 症状描述 -->症状描述，症状描述，症状描述症状描述</li>
                    <li class="multi-line"><label>临床诊断：</label><!-- 临床诊断 -->这里是临床诊断这里是临床诊断这里是临床诊断这里是临床诊断这里是临床诊断这里是临床诊断这里是临床诊断</li>
                </ul>
                </div>
            </li>
            <li id="footer">
                <!-- 是否需要footer，或者文案内容，需要产品决定 -->
                技术支持来自-互联网影像中心
            </li>
        </ul>
        <div id="bottom-bar">
            <!-- 这里‘###’要拼移动PACS的链接 -->
            <a href="###">查看影像</a>
        </div>
        <script type="text/javascript">



            var isShowAll = 0,
                    isBind = false;
            function addEvents(target, type, func) {
                if (target.addEventListener)
                    target.addEventListener(type, func, false);
                else if (target.attachEvent)
                    target.attachEvent("on" + type, func);
                else target["on" + type] = func;
            }
            function removeEvents(target, type, func){
                if (target.removeEventListener)
                    target.removeEventListener(type, func, false);
                else if (target.detachEvent)
                    target.detachEvent("on" + type, func);
                else target["on" + type] = null;
            }
            function deviceWidth(){
                var _dw = window.innerWidth;
                return _dw
            }
            function toggle(e){
                var _for = document.getElementById(e.target.dataset.for),
                        ico = e.target.getElementsByTagName('i')[0];
                if(_for){
                    var visibility = _for.style.display;
                    if(visibility !== 'none'){
                        _for.style.display = 'none';
                        ico.innerHTML = '+';
                        ico.className = '_show';
                        isShowAll++;
                    }else{
                        _for.style.display = 'block';
                        ico.innerHTML = '-';
                        ico.className = '';
                        isShowAll--;
                    }
                }
            }
            function handler(e){
                toggle(e);
            }
            function setToggle(name,type){
                var toggleBtn = document.getElementsByClassName(name);
                if(type){
                    if(!isBind){
                        for (var i = 0 ;i < toggleBtn.length; i++){
                            addEvents(toggleBtn[i],'click',handler)
                        }
                        isBind = true
                    }
                }else{
                    if(isBind){
                        for (var i = 0 ;i < toggleBtn.length; i++){
                            removeEvents(toggleBtn[i],'click',handler)
                        }
                        isBind = false
                    }
                }
            }
            function showAll(){
                if(isShowAll < 1){
                    isShowAll = 0;
                    return true
                }else{
                    var labelList = document.getElementsByClassName('label-list'),
                            ico = document.getElementsByClassName('_show'),
                            _hidden = (function(){
                                var _h = [];
                                for(var i = 0;i<labelList.length; i++){
                                    if(labelList[i].style.display == 'none'){
                                        _h.push(labelList[i])
                                    }
                                }
                                return _h
                            })();
                    for(var i = 0; i<ico.length; i++){
                        ico[i].innerHTML = '-'
                    }
                    if(_hidden.length > 0){
                        for(var i = 0;i<_hidden.length; i++){
                            _hidden[i].style.display = 'block'
                        };
                        isShowAll = 0
                    }else{
                        isShowAll = 0
                    }
                }
            }
            function layoutSetting(){
                var _w = deviceWidth();
                var _body = document.body;
                if(_w <= 320){
                    _body.className = 'xs';
                    setToggle('toggle-btn',true);
                    return 'xs'
                }else if(_w >320 && _w<=640){
                    _body.className = 'sm';
                    setToggle('toggle-btn',true);
                    return 'sm'
                }else if(_w >640 && _w<=800){
                    _body.className = 'md';
                    setToggle('toggle-btn',false);
                    showAll();
                    return 'md'
                }else if(_w >800){
                    _body.className = 'lg';
                    setToggle('toggle-btn',false);
                    showAll();
                    return 'lg'
                }
            }
            window.onload = function(){
                layoutSetting();
            };
            window.onresize = function(){
                layoutSetting()
            }
        </script>
    </body>
</html>